<template>
    <div class="tab">
      <div style="margin-bottom: 20px;">
        <el-button
          size="small"
          @click="addTab(editableTabsValue2)"
        >
          add tab
        </el-button>
      </div>
      <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs2"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          {{item.content}}
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
    export default {
      name: 'Tab',
      data () {
        return {
          editableTabsValue2: '2',
          editableTabs2: [{
            title: 'Tab 1',
            name: '1',
            content: 'Tab 1 content'
          }, {
            title: 'Tab 2',
            name: '2',
            content: 'Tab 2 content'
          }],
          tabIndex: 2
        }
      },
      methods: {
        addTab (targetName) {
          let newTabName = ++this.tabIndex + ''
          this.editableTabs2.push({
            title: 'New Tab',
            name: newTabName,
            content: 'New Tab content'
          })
          this.editableTabsValue2 = newTabName
        },
        removeTab (targetName) {
          let tabs = this.editableTabs2
          let activeName = this.editableTabsValue2
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                  activeName = nextTab.name
                }
              }
            })
          }
          this.editableTabsValue2 = activeName
          this.editableTabs2 = tabs.filter(tab => tab.name !== targetName)
        }
      }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
